<extend name="Base/common"/>
<block name="body">
    <title>个人信息</title>
    <body style="background:#faf8f8;">
        <!--注册-->
        <form action="{:U('usersave')}" method="post" class="form-horizontal" id="mac" enctype="multipart/form-data" >
            <div id="personNews">
                <header><a href="{:U('Index/index')}" class="back"><img src="__IMG__/images/back_03.png"/></a>个人信息<input type="button" class="ajax-file btn_1" target-form="form-horizontal" value="保存"></header>
                <ul>
                    <li class="liToggle">
                        <strong class="f-fl">我的头像</strong>
                        <span class="f-fr photo"><img src="__ROOT__{$data.logo|getimg=###}" width="60" height="60" /></span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none; height: 185px">
                        <!-- 11111 -->
                        <script type="text/javascript">
                            $(function () {
                                $("#pic").click(function () {
                                    $("#upload").click();               //隐藏了input:file样式后，点击头像就可以本地上传
                                    $("#upload").on("change", function () {
                                        var objUrl = getObjectURL(this.files[0]);  //获取图片的路径，该路径不是图片在本地的路径
                                        if (objUrl) {
                                            $("#pic").attr("src", objUrl);      //将图片路径存入src中，显示出图片
                                        }
                                    });
                                });
                            });
                            //建立一個可存取到該file的url
                            function getObjectURL(file) {
                                var url = null;
                                if (window.createObjectURL != undefined) { // basic
                                    url = window.createObjectURL(file);
                                } else if (window.URL != undefined) { // mozilla(firefox)
                                    url = window.URL.createObjectURL(file);
                                } else if (window.webkitURL != undefined) { // webkit or chrome
                                    url = window.webkitURL.createObjectURL(file);
                                }
                                return url;
                            }
                        </script>
                        <span>点击上传头像</span>
                        <img id="pic" src="__IMG__/images/scewm_03.jpg" alt="点击上传图片">
                        <input id="upload" name="logo" accept="image/*" type="file" style="display: none"/>
                        <style>
                            #pic{
                                width: 135px;
                                border-radius: 50%;
                                margin: 20px auto;
                                cursor: pointer;
                                height: 135px;
                                border: 1px solid;
                            }
                            #upload{
                                border: none;
                            }

                        </style>
                        <!-- 11111 -->

                        <!-- <input type="file" name="pic"> -->
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">昵称</strong>
                        <span class="f-fr">{$data.nickname}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" id="nickname" name="nickname" value="{$data.nickname}" style="border:1px solid ;" >
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">性别</strong>
                        <span class="f-fr"><eq name="data.sex" value="1">男<else/>女</eq></span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="radio" class="radiossa"  style="margin-left: 170px;"  name="sex" value="1" <eq name="data.sex" value="1">checked="checked"</eq> />男
                        <input type="radio" class="radiossa"  style="margin-left: 170px;"  name="sex" value="2" <eq name="data.sex" value="2">checked="checked"</eq>/>女
                        <!-- <input type="radio" class="radio" name="sex" value="1"<eq name="data.sex" value="1"> checked="checked"</eq>>男
                        <input type="radio" class="radio" name="sex" value="2"<eq name="data.sex" value="2"> checked="checked"</eq>>女 -->
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">年龄</strong>
                        <span class="f-fr">{$data.age}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="test" id="age" value="{$data.age}" name="age" maxlength="2">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">星座</strong>
                        <span class="f-fr">{$data.constell|getItemTitle='constell',###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="constell" class="class-select">
                            <volist name='constell' id='vol'>
                                <option value="{$vol.value}" <eq name="vol.value" value="$data.constell"> selected="selected"</eq>>{$vol.title}</option>
                            </volist>
                        </select>
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">身份</strong>
                        <span class="f-fr">{$data.identity|getItemTitle='identity',###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="identity" class="class-select">
                            <volist name='identity' id='vol'>
                                <option value="{$vol.value}" <eq name="vol.value" value="$data.identity"> selected="selected"</eq>>{$vol.title}</option>
                            </volist>
                        </select>
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">联系方式</strong>
                        <span class="f-fr">手机  {$data.mobile}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input id="mobile" type="text" name="mobile" value="{$data.mobile}" maxlength="11">
                    </li>
<!--                    <li class="liToggle">
                        <strong class="f-fl">位置</strong>
                        <span class="f-fr">{$data.area_id|getArea=###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="pid">
                            <option value="" class="aaaa">{$towArea.ar_title}</option>
                            <volist name="areas" id="v">
                                <option value="{$v.id}">{$v.title}</option>
                            </volist>
                        </select>
                        <select name="area_id" class="class-area_id">
                            <option value="{$towArea.id}">{$towArea.title}</option>
                        </select>
                    </li>-->
                    <input type="hidden" name="id" value="{$data.id}">
                </ul>
            </div>
        </form>
    </body>
    <script type="text/javascript">
        //切换点击的
        $('.liToggle').toggle(function () {
            $(this).next().show(500);
        }, function () {
            $(this).next().hide(500);
        });
        //ajax自写跳转
        $('.ajax-file').click(function () {
            var url = $('#mac').attr('action');
            var fd = new FormData($("#mac")[0]);
            $.ajax({
                url: url,
                type: "POST",
                data: fd,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    var index = layer.alert(data.info, function () {
                        location.href = "{:U('Index/index')}";
                    });
                }
            });
        })
        //修改昵称的
        $('#nickname').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改性别的
        $('.radiossa').on('change', function () {
            var val = $(this).val();
            if (val == 1) {
                val = "男";
            } else {
                val = "女";
            }
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改年龄的
        $('#age').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改星座的
        $('.class-select').on('change', function () {
            val = $(this).find('option:selected').html();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        $('#mobile').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>手机  " + val + "</span>");
            $('.display-block').hide(300);
        });
        //地区联动
        $('select[name=pid]').change(function () {
            $('.aaaa').remove();
            $('select[name=area_id] option:gt(0)').remove();
            var id = $(this).val();
            $.post('__MODULE__/Area/areaList', {'id': id}, function (res) {
                $.each(res, function (index, el) {
                    $('select[name=area_id').append('<option value=\'' + el.id + '\'>' + el.title + '</option>');
                });
            });
        });
        //修改地区的
        $('.class-area_id').on('change', function () {
            val = $(this).find('option:selected').html();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
    </script>
</block>